<template>
  <page-header-wrapper>
    <div class="center-container">
      <a-row :gutter="[24, 24]">
        <a-col :md="24" :lg="24" :xl="17">
          <a-spin :spinning="spinning">
            <a-card :bordered="false">
              <h2 style="font-size:20px;font-weight:bold;opacity: 0.85;">修改信息</h2>
              <a-form :form="form" @submit="submitUser">
                <a-row :gutter="48">
                  <a-col :span="12">
                    <a-form-item label="用户名">
                      <a-input v-decorator="['name']" placeholder="请填写用户名" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="头像"
                      :labelCol="{ md: 6, lg: 5, xl: 4, xxl: 3 }"
                      :wrapperCol="{ md: 18, lg: 19, xl: 20, xxl: 21 }"
                      class="form-header"
                    >
                      <d-upload
                        v-decorator="['head_img', { initialValue: '' }]"
                        class="avatar-uploader"
                        defaultImage="user"
                        defaultImageSize="large"
                      >
                      </d-upload>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-row :gutter="24">
                      <a-col :span="8">
                        <a-form-item label="邮箱">
                          <a-input v-decorator="['email']" placeholder="请填写邮箱" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-item label="性别">
                          <a-select v-decorator="['sex', { initialValue: 1 }]" placeholder="请选择">
                            <a-select-option :value="1">男</a-select-option>
                            <a-select-option :value="2">女</a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-item label="生日">
                          <a-date-picker v-decorator="['birthday']" style="width:100%" />
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="24">
                    <a-row :gutter="24">
                      <a-col :span="8">
                        <a-form-item label="微信收款银行卡号">
                          <a-input v-decorator="['bank_card']" placeholder="请填写微信收款银行卡号" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-item label="收款银行卡姓名">
                          <a-input v-decorator="['bank_card_name']" placeholder="请填写收款银行卡姓名" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-item label="银行名称">
                          <a-select v-decorator="['bank_code']" placeholder="请选择银行名称">
                            <a-select-option :value="item.bank_code" v-for="item in bankList" :key="item.id">{{
                              item.bank_name
                            }}</a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="24">
                    <a-row :gutter="48">
                      <a-col :span="12">
                        <a-form-item label="支付宝账号">
                          <a-input v-decorator="['alipay_account']" placeholder="请填写支付宝账号" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="账号真实姓名">
                          <a-input v-decorator="['alipay_name']" placeholder="支付宝账号真实姓名" />
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="24">
                    <a-row :gutter="48">
                      <a-col :span="12">
                        <a-form-item label="修改密码">
                          <a-input v-decorator="['password']" placeholder="请输入要修改的密码" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="地址">
                          <a-input v-decorator="['province']" placeholder="请填写详细地址"></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="24">
                    <a-row :gutter="48">
                      <a-col :span="12">
                        <a-form-item label="手机号">
                          <a-input v-decorator="['mobile']" placeholder="请输入手机号" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="手机号验证码">
                          <div style="display:flex;height:40px">
                            <a-input
                              v-decorator="['code', { initialValue: '' }]"
                              placeholder="请输入手机号验证码"
                              style="width:70%;"
                            />
                            <code-button style="margin-left:auto;margin-right:8px" :mobile="form.getFieldValue('mobile')" />
                          </div>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
                <a-button htmlType="submit" type="primary" :loading="loadingSubmit">提交</a-button>
              </a-form>
            </a-card>
          </a-spin>
        </a-col>
        <a-col :md="24" :lg="24" :xl="7">
          <a-card :bordered="false">
            <div class="account-center-avatarHolder">
              <div class="avatar">
                <a-avatar :src="userInfo.head_img" :size="104" icon="user"></a-avatar>
              </div>
              <div class="username">{{ userInfo.name }}</div>
              <div class="bio" style="color:#333;">电话:{{ userInfo.mobile }}</div>
              <div>邮箱:{{ userInfo.email }}</div>
              <div style="margin-top:30px">
                <a-button @click="loginOut">退出登录</a-button>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { getInfo, getWxBindBankCode, userEdit } from '@/api/login'
import pick from 'lodash.pick'
import moment from 'moment'
import { mapMutations, mapGetters } from 'vuex'
import codeButton from '@/components/code-btn/code-btn'

const fileds = [
  'name',
  'province',
  'alipay_account',
  'alipay_name',
  'bank_card',
  'bank_card_name',
  'mobile',
  'sex',
  'email',
  'password',
  'birthday',
  'province',
  'bank_code'
]
export default {
  components: {
    codeButton
  },
  data () {
    return {
      form: this.$form.createForm(this),
      bankList: [],
      dateFormat: 'YYYY-MM-DD',
      spinning: false,
      loadingCode: false,
      loadingSubmit: false,
      loading: false
    }
  },
  created () {
    fileds.forEach(v => this.form.getFieldDecorator(v))
    this.getUserInfo()
    getWxBindBankCode().then(res => {
      this.bankList = res.data
    })
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    ...mapMutations(['SET_INFO']),
    getUserInfo () {
      this.spinning = true
      getInfo().then(res => {
        this['SET_INFO'](res.data)
        this.spinning = false
        const userInfo = this.userInfo
        const dateFormat = this.dateFormat
        const values = {
          ...this.userInfo,
          birthday: userInfo.birthday && moment(userInfo.birthday, dateFormat),
          province: userInfo.address,
          bank_code: userInfo.bank_code || undefined
        }
        this.form.setFieldsValue(pick(values, fileds))
      })
    },
    submitUser (e) {
      this.form.validateFields((e, values) => {
        if (!e) {
          this.loadingSubmit = true
          const parmas = {
            uid: this.userInfo.uid,
            ...values,
            birthday: values['birthday'] && values['birthday'].format(this.dateFormat)
          }
          userEdit(parmas)
            .then(res => {
              this.getUserInfo()
              this.$message.success('操作成功')
            })
            .finally(() => {
              this.loadingSubmit = false
            })
        }
      })
    },
    loginOut () {
      this.$confirm({
        title: '确认提示',
        content: '您确认要退出登录吗?',
        onOk: () => {
          this.$store.dispatch('Logout').then(() => {
            window.location.reload()
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.center-container {
  width: 100%;
  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    & > .avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }
}
.avatar-uploader {
  display: inline-block;
  /deep/.ant-upload {
    width: 64px;
    height: 64px;
    margin-bottom: 0px;
  }
}
.ant-form-item {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 6px;
}
.ant-input,
/deep/.ant-select-selection,
/deep/.ant-calendar-picker-input {
  border: none;
  // padding-left: 0;
}
/deep/.ant-form-item-label {
  padding-left: 11px;
}
.form-header {
  /deep/.ant-form-item-label {
    text-align: left;
  }
}
</style>
